import {useRef, useState} from "react";
import axios from 'axios';
// import { useHistory } from 'react-router-dom'; // 如果你使用的是 react-router


// function Test1() {
//   // 用于存储接口响应
//   const [data, setData] = useState({});

//   useEffect(() => {
//     // 创建form-data
//     const formData = new FormData();
//     formData.set('start', 1);
//     formData.set('end', 400);
//     // 发送一个post请求
//     axios.post('/path', formData)
//       .then(response => {
//         // 将返回的数据存入到data中
//         setData(response.data);
//         // 在控制台可以看到输出的data
//         console.log(data);
//       })
//       .catch(error => {
//         console.log(error);
//       });
//   }, []);
//   return (
//     // 自定义展示data
//     <></>
//   )
// }

//登录|注册
function Login() {

    // 用于存储接口响应
    const [data, setData] = useState({});
    // 创建form-data
    const formData = new FormData();
    // 创建form-data-userAdd
    const formDataUserAdd = new FormData();

    // const [phone, setphone] = useState("")
    //登录或者是注册页面的状态（在同一时间只能显示一个页面）
    let [flag, setflag] = useState(true)
    const userRef = useRef("")
    const userRef1 = useRef("")
    const passwordRef = useRef("")
    const CodeRef = useRef("")
    let randomNumRef = useRef("")

    //11位手机号码正则
    // var reg_user = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    var reg_user = /^[0-9]{11}$/;
    //最短为4位密码正则
    var reg_pas = /^[a-zA-Z0-9_-]{4,18}$/;

    function checkSubmit(e) {
        if (userRef.current.trim() === "") {
            alert("您还没有填写手机号!");
            e.preventDefault();
        } else if (passwordRef.current.trim() === "") {
            alert("您还没有填写密码!");
            e.preventDefault();
            console.log(passwordRef.current);
        } else {
            // 发送一个post请求
            axios.post('http://localhost:8091/user/login', formData)
                .then(response => {
                    // 将返回的数据存入到data中
                    setData(response.data);
                    // 在控制台可以看到输出的data
                    if (response.data.code == 0) {
                        window.location = "/";
                    } else {
                        alert("请使用用户账户登录")
                        window.location = "/login"
                    }
                })
                .catch(error => {
                    console.log(error);
                });
            return (
                // 自定义展示data
                <></>
            )
        }
    }

    function Module1(params) {
        return (<div>
            <form>
                <div className="form-group">
                    <label for="username"><p className="text-dark">账户</p></label>
                    <input type="text" className="form-control" id="username" placeholder="用户名"
                           onKeyUp={e => {
                               userRef.current = e.target.value
                               formData.set("username", e.target.value)
                           }}/>
                </div>
                <div className="form-group">
                    <label for="exampleInputPassword1 "><p className="text-dark">密码</p></label>
                    <input type="password" className="form-control" id="exampleInputPassword1"
                           placeholder="请输入密码(放心，我们绝不会分享您的信息)"
                           onKeyUp={e => {
                               passwordRef.current = e.target.value
                               formData.set("password", e.target.value)
                           }}/>
                </div>
                <div className="form-group form-check" style={{height: 40 + "px"}}>
                    <input type="checkbox" className="form-check-input" id="exampleCheck1"/>
                    <label className="form-check-label" for="exampleCheck1"><p className="text-dark">记住密码</p>
                    </label>
                </div>
            </form>
            <button className="btn btn-primary" onClick={() => {
                setflag(flag = false)
            }}>没有账户？立即免费注册
            </button>
            <div>
                <a href="http://localhost:8091/login" className="btn btn-primary">管理员登录界面</a>
                <a href="#" className="btn btn-primary" onClick={e => checkSubmit(e)}>登录</a>
            </div>


        </div>)
    }

    function Module2(params) {
        return (<div>
            <form>
                <div className="form-group">
                    <label for="exampleInputEmail1"><p className="text-dark">账户名</p></label>
                    <input type="text" className="form-control" id="username" name="username"
                           aria-describedby="emailHelp" placeholder="账户名" onKeyUp={e => {
                        userRef1.current = e.target.value
                        formDataUserAdd.set("username", e.target.value)
                    }}/>
                </div>
                <div className="form-group">
                    <label for="exampleInputEmail1"><p className="text-dark">密码</p></label>
                    <input type="password" className="form-control" id="password" name="password"
                           aria-describedby="emailHelp" placeholder="密码" onKeyUp={e => {
                        userRef1.current = e.target.value
                        formDataUserAdd.set("password", e.target.value)
                    }}/>
                </div>

                <div className="form-group">
                    <label for="exampleInputEmail1"><p className="text-dark">手机号</p></label>
                    <input type="number" className="form-control" id="phone" name="phone"
                           aria-describedby="emailHelp" placeholder="手机号" onKeyUp={e => {
                        userRef1.current = e.target.value
                        formDataUserAdd.set("phone", e.target.value)
                    }}/>
                </div>
                <div className="form-group">
                    <div>
                        <label><p className="text-dark">验证码</p></label>
                    </div>
                    <div style={{height: 40 + "px"}}>
                        <input type="text" className="form-control" placeholder="请输入验证码"
                               style={{width: 200 + "px", float: "left"}}
                               onKeyUp={e => {
                                   CodeRef.current = e.target.value
                               }}/>
                        <a href="#" className="btn btn-primary" style={{width: 160 + "px", float: "right"}}
                           onClick={() => {
                               randomNumRef.current = Math.floor(Math.random() * 9000) + 1000
                               alert(`【雪球】您正在使用短信认证，验证码:` + randomNumRef.current, 'success')
                           }}> 获取验证码</a>
                    </div>
                </div>
                <div>
                    <button onClick={() => {
                        setflag(flag = true)
                    }} className="btn btn-primary">已有账户登录
                    </button>
                    <a href="#" className="btn btn-primary" onClick={e => {
                        if (!reg_user.test(userRef1.current)) {
                            alert("您填写的手机号码格式错误,手机号的长度应该为11位且合法!");
                            e.preventDefault();
                        } else if (CodeRef.current != randomNumRef.current || CodeRef.current === "") {
                            alert("验证码错误!" + CodeRef.current + randomNumRef.current);
                            e.preventDefault();
                        } else {
                            // 发送一个post请求
                            axios.post('http://localhost:8091/user/save', formDataUserAdd)
                                .then(response => {
                                    // 将返回的数据存入到data中
                                    setData(response.data);
                                    // 在控制台可以看到输出的data
                                    console.log(data);
                                    if (response.data.code == 0) {
                                        // 切换到登录页面
                                        setflag(flag = true)
                                    } else {
                                        alert("注册失败，用户名换一个试试");
                                    }
                                })
                                .catch(error => {
                                    console.log(error);
                                });
                            return (
                                // 自定义展示data
                                <></>
                            )
                        }
                    }}>注册登录</a>
                </div>
            </form>

        </div>)
    }

    return (
        <div className="shadow p-3 mb-5 bg-body-tertiary rounded" style={{width: 400 + "px"}}><span></span>
            <div className="Login" style={{
                border: "1px solid #ccc!important",
                padding: "14px;border-radius: 16px!important",
                backgroundColor: "rgba(255, 255, 255, 0.5)"
            }}>
                {flag ? <Module1/> : <Module2/>}
                <div>
                    <p className="text-black-50 fs-6"><input type="checkbox" checked/>
                        我已同意《雪球用户协议》《雪球服务条款》《雪球免责声明》《雪球隐私政策》</p>
                </div>
            </div>
        </div>
    );
}

export default Login;
